﻿@{
    ViewBag.Title = "AddCategory";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@section scripts
{
    <script type="text/javascript" src="~/Scripts/App/Admin/category_add.js"></script>
}

<div class="row">
    <div class="col-mod-12">

        <ul class="breadcrumb">
            <li><a href="index.html">Dashboard</a></li>
            <li><a href="~/Admin/ListCategory">Category</a></li>
            <li class="active">New Category</li>
        </ul>
    </div>
</div>

<!-- Form elements -->
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-cascade">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-plus-circle"></i>Add New Category
                </h3>
            </div>
            <div class="panel-body ">
                <div class="ro">
                    <div class="col-mol-md-offset-2">
                        <form data-bind="submit: $root.doAdd" class="form-horizontal cascde-forms" name="category_add" id="category_add">
                            <div class="form-group">
                                <label class="col-lg-2 col-md-3 control-label">Name</label>
                                <div class="col-lg-10 col-md-9">
                                    <input type="text" class="form-control form-cascade-control input-small" name="Name" id="CategoryName" data-bind="value: $root.Name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 col-md-3 control-label">Description</label>
                                <div class="col-lg-10 col-md-9">
                                    <textarea style="resize: none" rows="5" class="form-control form-cascade-control input-small" name="Description" id="Description" data-bind="value: $root.Description"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 col-md-3 control-label">Icon</label>
                                <div class="col-lg-10 col-md-9">
                                        <span>Add files...</span>
                                        <!-- The file input field used as target for the file upload widget -->
                                        <input id="upload" name="upload" type="file" data-bind="fileUpload: { property: 'IconPath', url: '/api/AdminApi/PostCategoryWithIcon' }" />
                                    @*<br>
                                    <br>
                                    <!-- The global progress bar -->
                                    <div id="progress" class="progress" style="width: 50%">
                                        <div class="progress-bar progress-bar-success"></div>
                                    </div>
                                    <!-- The container for the uploaded files -->
                                    <div id="files" class="files"></div>*@
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-lg-10 col-md-9">
                                    <input type="submit" value="Submit" class="btn bg-primary text-white btn-lg">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@* <form>
        <label for="upload">Upload</label>
        <input id="upload" name="upload" type="file" data-bind="fileUpload: { property: 'IconPath', url: '/api/AdminApi/PostCategoryWithIcon' }" />
        <input type="submit" value="Submit" />
    </form>*@
